<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<meta charset="utf-8" />
		
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
		<style type="text/css">
			.my-navbar {
				padding: 20px 0;
				transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
			}

			nav ul:first-child a,
			.navbar-brand {
				background: transparent !important;
				color: #fff
			}

			.my-navbar a:hover {
				color: #45bcf9 !important;
				background: transparent;
				outline: 0
			}

			.my-navbar a {
				transition: color 0.5s ease-in-out;
			}

			/*-webkit-transition ;-moz-transition*/
			.top-nav {
				padding: 0;
				background: #000;
			}

			button.navbar-toggle {
				background-color: #fbfbfb;
			}

			/*整个背景都是transparent透明的，会看不到，所以再次覆盖一下*/
			button.navbar-toggle>span.icon-bar {
				background-color: #dedede
			}

			.navbar {
				padding-left: 40px;
			}

			.dropdown-toggle,
			.glyphicon-off {
				color: white;
				font-size: 15px;
			}

			/* .dropdown {
				margin-left: 600px;
			} */

			.dropdown-toggle:hover {
				color: white;
			}

			.alert-warning {
				height: 130px;
				margin-top: 20px;
			}

			.btn-danger,
			.btn-default {
				width: 100px;
			}

			.page-header {
				margin-top: 0px;
				padding: 0;
			}

			.page-header h1 {
				padding: 0;
				margin-top: 0;
				font-size: 16px;
			}

			.search {
				border: 1px solid #000;
				border-top: none;
				padding: 10px;
			}

			.nav-tabs a {
				border-bottom: none;
			}
		</style>
	</head>
	<body>
		<nav class="navbar navbar-fixed-top my-navbar top-nav" role="navigation">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">

						<span class="glyphicon glyphicon-list"></span>

					</button>
					<a class="navbar-brand" href="#">重庆工程学院</a>
				</div>
				<div class="collapse navbar-collapse" id="example-navbar-collapse">
					<ul class="nav navbar-nav" style="padding:-10px;">
						<li class=""><a href="index.html" class="glyphicon glyphicon-home">&nbsp后台首页</a></li>
						<li><a href="usermanage.html" class="glyphicon glyphicon-user" style="color: #45bcf9">&nbsp用户管理</a></li>
						<li><a href="contentmanage.html" class="glyphicon glyphicon-list-alt">&nbsp内容管理</a></li>
						<li><a href="#" class="glyphicon glyphicon-tags">&nbsp便签的管理</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right" style="padding-right: 60px ;padding-top: 10px;">
						<div class="dropdown">
							<span class="btn dropdown-toggle" data-toggle="dropdown">
								管理员
								<span class="caret"></span>
							</span>
							<ul class="dropdown-menu">
								<li>
									<a href="#" class="glyphicon glyphicon-home">&nbsp;前台首页</a>
								</li>
								<li>
									<a href="personalpage.html" class="glyphicon glyphicon-user">&nbsp;个人主页</a>
								</li>
								<li>
									<a href="#" class="glyphicon glyphicon-cog">&nbsp;个人设置</a>
								</li>
								<li>
									<a href="#" class="glyphicon glyphicon-credit-card">&nbsp;账户中心</a>
								</li>
								<li>
									<a href="#" class="glyphicon glyphicon-heart">&nbsp;我的收藏</a>
								</li>
								
							
							</ul>
							<li class="glyphicon glyphicon-off"><a href="" style="color: white;">退出</a></li>

					</ul>
				</div>
			</div>
		</nav>
		<div class="container">
			<div class="row">
				<ul class="col-md-2">
					<div class="list-group">
						<div class="list-group">
							<a href="usermanage.html" class="list-group-item">用户管理</a>
							<a href="usersearch.html" class="list-group-item  active">用户搜索</a>
							<a href="" class="list-group-item adduser" data-toggle="modal" data-target="#myModal">添加用户</a>
						</div>
					</div>
				</ul>



				<div class="col-md-10">
					<div class="page-header">
						<h1>用户管理</h1>
					</div>
					<ul class="nav nav-tabs">
						<li><a href="usermanage.html">用户列表</a></li>
						<li class="active"><a href="#">用户搜索</a></li>
						<li><a href="#" data-toggle="modal" data-target="#myModal">添加用户</a></li>
					</ul>
					<form action="" method="" class="search">
						<div class="alert alert-info">
							<strong>技巧提示：</strong>
							支持模糊搜索和匹配搜索，匹配搜索使用*代替!
						</div>
						<div class="form-group">
							<label for="name">用户名</label>
							<input type="text" id="name" value="" placeholder="请输入用户名" class="form-control username" />
						</div>
						<div class="form-group">
							<label for="uid">UID</label>
							<input type="text" id="uid" value="" placeholder="请输入UID" class="form-control uid"/>
						</div>
						<div class="form-group">
							<label for="userg">选择用户组</label>
							<select id="userg" class="form-control userg">
								<option value="1">限制会员</option>
								<option value="2">注册会员</option>
								<option value="3">中级会员</option>
							</select>
						</div>
						<button type="button" class="btn btn-light search_user" style="background:#3e444c">提交</button>
				</div>
				</form>
			</div>
		</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							添加用户
						</h4>
					</div>
					<div class="modal-body">
						<form action="" method="">


							<div class="form-group">
								<label for="username">用户名</label>
								<input class="form-control" type="text" id="username" placeholder="用户名" required>
							</div>
							<div class="form-group">
								<label for="pass">用户密码</label>
								<input class="form-control" type="password" id="pass" placeholder="输入用户密码">
							</div>
							<div class="form-group">
								<label for="pass">确认用户密码</label>
								<input class="form-control" type="password" id="confirm" placeholder="请确认输入用户密码">
							</div>
							<div class="form-group">
								<label for="pass">请输入用户邮箱</label>
								<input class="form-control" type="email" id="email" placeholder="请输入用户邮箱">
							</div>
							<div class="form-group">
								<label for="pass">所属用户组</label>
								<!-- <label for="userg">选择用户组</label> -->
								<select id="userg" class="form-control">
									<option value="1">限制会员</option>
									<option value="2">中级会员</option>
									<option value="3">注册会员</option>
								</select>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-light" data-dismiss="modal"  style="background:#3e444c">关闭
						</button>
						<input type="submit" class="btn btn-primary submit" value="提交">
							
						
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		


		<footer>
			<div class="row">
				<div class="col-md-12 text-center navbar-static-bottom"  style="margin-top: 30PX;">
					Copyright @ 2019-2020

				</div>
			</div>
		</footer>
	</body>
</html>
<script type="text/javascript">
	var onResize = function() {
		// apply dynamic padding at the top of the body according to the fixed navbar height
		$("body").css("padding-top", $(".navbar-fixed-top").height() * 1.5);
	};

	// attach the function to the window resize event
	$(window).resize(onResize);

	// call it also when the page is ready after load or reload
	$(function() {
		onResize();
	});


	function ajax() {
		$.ajax({
			type: "get", //发送请求的类型post，get
			dataType: "json", //默认是text
			url: `http://127.0.0.1:7300/mock/5ee96c5cc5fadd342c8a0931/totalData/getUser`, //发送的地址
			// data: "username="+$("#username").val()+"password="+$("#password").val()+"",//传递的参数
			success: function(msg) { //成功的回调
				var data = msg.data
				var status=msg
				let i=1
				$('.submit').click(function(){
					let username=$('#username').val()
					let pass=$('#pass').val()
					let email=$('#email').val()
					let type=$('#userg').val()
					let info={}
					info.id=data.length
					i++
					info.name=username
					info.password=pass
					info.type=type
					info.email=email
					// let info1=JSON.stringify(info)
					// console.log(info1);
					data.push(info)
					console.log(data);
					let register=!status.registerstatus
					if(register){
						alert('注册失败！')
					}else{
						alert('注册成功！')
					}
					$('#myModal').modal('hide');
				})


				$('.search_user').click(function() {
					$('.search').find('table').remove()
					var flag = 0;
					var num=0
					let rest
					[...rest]=['限制会员','注册会员','中级会员']
					for (let i = 0; i < data.length; i++) {
						if(($('.username').val()!="")&&($('.uid').val()!="")&&($('.userg').val()!="")){
						if ($('.username').val() == data[i].name && $('.uid').val() == data[i].id && $('.userg').val() == data[i].type) {
							$('.search').append(
								`<table class="table" style="margin-top:20px"><th>UID</th><th>姓名</th><th>邮箱</th><th>所属用户组</th><tr class='well'><td>${data[i].id}</td><td>${data[i].name}</td><td>${data[i].email}</td><td>${rest[data[i].type-1]}</td></tr></table>`
							)
							flag=0
							num++
							break
						} else {
							flag = 1;
						}
						
						}
						else if(($('.uid').val()=="")&&($('.username').val()!="")){
							if(data[i].name.match($('.username').val())!=null){
								$('.search').append(
									`<table class="table" style="margin-top:20px"><th>UID</th><th>姓名</th><th>邮箱</th><th>所属用户组</th><tr class='well'><td>${data[i].id}
									</td><td>${data[i].name}</td><td>${data[i].email}</td><td>${rest[data[i].type-1]}</td></tr></table>`)
									num++
									flag=0
									
											
								
							}else {
							flag = 1;
						}
						}else if(($('.username').val()=="")&&($('.uid').val()=="")&&($('.userg').val()!="")){
							if(data[i].type.match($('.userg').val())!=null){
								$('.search').append(
									`<table class="table" style="margin-top:20px"><th>UID</th><th>姓名</th><th>邮箱</th><th>所属用户组</th>
									<tr class='well'><td>${data[i].id}
									</td><td>${data[i].name}</td><td>${data[i].email}</td><td>${rest[data[i].type-1]}</td></tr></table>`)
									num++
									flag=0
							}else {
							flag = 1;
						}
						}
						else if(($('.username').val()=="")&&($('.uid').val()!="")&&($('.userg').val()!="")){
							if(data[i].id==$('.uid').val()){
								$('.search').append(
									`<table class="table" style="margin-top:20px"><th>UID</th><th>姓名</th><th>邮箱</th><th>所属用户组</th><tr class='well'><td>${data[i].id}
									</td><td>${data[i].name}</td><td>${data[i].email}</td><td>${rest[data[i].type-1]}</td></tr></table>`)
									num++
									flag=0
									
											
								
							}else {
							flag = 1;
						}
						}
						
						
						
						

					}
					if (flag == 1&&num==0) {
						alert("没有找到符合条件的用户！")
					}


				})

			},









			error: function(error) {
				console.log(error.responseText);
			}
		});
	}

$('.adduser').click(function(){
	$('.col-md-2 .list-group a').removeClass('active')
	$(this).addClass('active')
})
	ajax();
	
	
</script>
